<template>
    <!-- Form Start -->
    <el-form label-width="90px">
        <el-form-item label="课程名称">
            <el-input class="ls-input" v-model="courseData.name" @input="getLists" placeholder="请输入课程名称">
                <template #append>
                    <el-button icon="search" />
                </template>
            </el-input>
        </el-form-item>
    </el-form>
    <!-- Form End -->

    <!-- Table Start -->
    <el-scrollbar height="350px" class="m-t-20">
        <el-table ref="tableDataRef" :data="pager.lists" style="width: 100%">
            <el-table-column label="选择" width="60">
                <template #default="scope">
                    <div class="flex row-center">
                        <el-checkbox :model-value="getSelectItem(scope.row)" @change="handleSelectItem(scope.row)" label
                            size="large"></el-checkbox>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="课程名称" min-width="200">
                <template #default="scope">
                    <div class="flex col-center">
                        <el-image class="flex-none" style="width: 60px; height: 60px" :src="scope.row.cover" :fit="'cover'">
                        </el-image>
                        <div class="ml-[10px]">{{ scope.row.name }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="sellPrice" label="价格" max-width="120">
                <template #default="{ row }">
                    <div>{{ row.sellPrice || '免费' }}</div>
                </template>
            </el-table-column>
            <el-table-column property="status" label="课程类型" max-width="140">
                <template #default="scope">
                    <!-- <el-tag class="ml-2" type="success"
            >{{ scope.row.type_desc }}
          </el-tag> -->
                    <el-tag type="success" v-if="scope.row.type == 1">图文</el-tag>
                    <el-tag type="success" v-if="scope.row.type == 2">音频</el-tag>
                    <el-tag type="success" v-if="scope.row.type == 3">视频</el-tag>
                    <el-tag type="success" v-if="scope.row.type == 4">专栏</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>
    <!-- Table End -->

    <!-- Footer Pagination Start -->
    <div class="flex row-right">
        <pagination v-model="pager" @change="getLists" :page-sizes="[5]" layout="total, prev, pager, next, jumper" />
    </div>
    <!-- Footer Pagination End -->
</template>

<script lang="ts" setup>
import { apiCourseLists } from '@/api/course/course'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { computed, withDefaults, reactive } from 'vue'

/** Emit Start **/
const emit = defineEmits(['setLink'])
/** Emit End **/

/** Props Start **/
const props = withDefaults(
    defineProps<{
        modelValue: any
    }>(),
    {
        modelValue: []
    }
)
/** Props End **/

/** Data Start **/
const courseData = reactive({
    status: 1
})
const { pager, getLists } = usePaging({
    size: 5,
    fetchFun: apiCourseLists,
    params: courseData
})
/** Data End **/

/** Computed Start **/
const params = computed({
    get: () => {
        return props.modelValue
    },
    set: (value) => {
        emit('setLink', value)
    }
})
// 是否选中当前
const getSelectItem = computed(() => {
    return (event: any) => {
        return params.value?.id == event.id
    }
})
/** Computed End **/

/** Methods Start **/
/**
 * @description 选择课程
 */
const handleSelectItem = (event: any): void => {
    if (params.value.id == event.id) {
        params.value = {}
    } else {
        params.value = event
    }
}
/** Methods End **/

/** Life Cycle Start **/
getLists()
/** Life Cycle End **/
</script>

<style lang="scss" scoped>
.ls-input {
    width: 240px;
}
</style>
